<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>homework_1 apply</title>
    <style>
        .title{
            color:blue;
            padding-left: 30px;
            font-weight:bold;
        }
        label{
            font-weight:bold;
        }
        .no{
            color:black;
            font-weight:unset;
        }
    </style>
</head>
<body>
    <label class="title">欢迎注册会员</label>
    <br>
    <label>手机号码:</label><input type="text" maxlength="11" minlength="11" required placeholder="11位手机号码"><span style="color:red;padding-left: 5px;">必填</span>
    <br>
    <label>创建密码:</label><input type="text" maxlength="8" minlength="8" required placeholder="8位密码"><span style="color:red;padding-left: 5px;">必填</span>
    <br>
    <label>注册邮箱:</label><input type="email" required placeholder="例如:wustzz@sina.com"><span style="color:red;padding-left: 5px;">必填</span>
    <br>
    <label>验证码:</label>
    <!-- 输入验证码的框 -->
<input type="text" name="captchaInput" maxlength="4" placeholder="请输入验证码">
<!-- 显示验证码的区域 -->
<div id="captcha" style="display: inline-block; padding: 5px 10px; background-color: #f0f0f0; border: 1px solid #ccc; font-size: 20px; letter-spacing: 3px; margin: 0 10px; cursor: pointer;">
    ABC1
</div>
<!-- 点击文字直接调用刷新函数 -->
<label onclick="refreshCaptcha()" style="font-size: 12px; color: #666; cursor: pointer;">点击刷新</label>
<br>


<script>
    // 验证码字符库
    const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
    const captchaElement = document.getElementById('captcha');
    
    // 生成4位随机验证码
    function generateCaptcha() {
        let captcha = '';
        for (let i = 0; i < 4; i++) {
            const randomIndex = Math.floor(Math.random() * chars.length);
            captcha += chars[randomIndex];
        }
        return captcha;
    }
    
    // 刷新验证码函数
    function refreshCaptcha() {
        captchaElement.textContent = generateCaptcha();
    }
    
    // 初始化验证码
    refreshCaptcha();
    
    // 点击验证码区域也能刷新
    captchaElement.addEventListener('click', refreshCaptcha);
</script>
    <br>
    <label>性别:</label><input type="radio" name="gender" id="male" value="male"><label for="male" class="no">男</label><input type="radio" name="gender" id="female" value="female"><label for="female" class="no">女</lable>
    <br>
    <label>生日:</label><input type="text" maxlength="11" minlength="11" required placeholder="XXXX年XX月XX日">
    <br>
    <label>年龄:</label><input type="text" maxlength="3" required placeholder="(岁)">
    <br>
    <label>籍贯:</label><select name="hometown">
    <option value="wuhan">武汉</option>
    <option value="shengnei">湖北省内(非武汉)</option>
    <option value="shengwai">湖北省外(中国)</option>
    <option value="guowai">外国</option>
    </select>
    <br>
    <label>个人学历:</label><select name="degree">
    <option value="gaozhongjiyixia">高中及以下</option>
    <option value="benke">本科</option>
    <option value="shuoshiyanjiusheng">硕士研究生</option>
    <option value="boshijiyixia">博士及以上</option>
    </select>
    <br>
    <label>月薪:</label><input type="range" max="100000" min="3000" step="100" name="salary" id="salarySlider" oninput="document.getElementById('salaryValue').textContent = this.value">
    <span id="salaryValue">3000</span>
    <label>元</label>
    <br>
    <label>个人爱好:</label>
    <br>
    <input type="checkbox" name="hobbies[]" id="hobby-reading" value="reading">
    <label for="hobby-reading">阅读</label><br>

    <input type="checkbox" name="hobbies[]" id="hobby-sports" value="sports">
    <label for="hobby-sports">运动</label><br>

    <input type="checkbox" name="hobbies[]" id="hobby-music" value="music">
    <label for="hobby-music">音乐</label><br>

    <input type="checkbox" name="hobbies[]" id="hobby-travel" value="travel">
    <label for="hobby-travel">旅行</label><br>

    <input type="checkbox" name="hobbies[]" id="hobby-games" value="games">
    <label for="hobby-games">游戏</label><br>
    <br>
    <label>个人照片:</label>
    <input type="file" id="imageUpload" accept="image/*" onchange="previewImage(event)">
    <div id="previewContainer" style="margin-top: 10px; max-width: 300px;">
    <img id="imagePreview" src="" alt="预览图片" style="max-width: 100%; max-height: 200px; display: none;">
    </div>

<script>
    // 图片预览函数
    function previewImage(event) {
        // 获取文件选择控件和预览图片元素
        const fileInput = event.target;
        const preview = document.getElementById('imagePreview');
        const container = document.getElementById('previewContainer');
        
        // 检查是否有文件被选中
        if (fileInput.files && fileInput.files[0]) {
            // 创建文件读取器
            const reader = new FileReader();
            
            // 当文件读取完成后执行
            reader.onload = function(e) {
                // 设置预览图片的源
                preview.src = e.target.result;
                // 显示预览图片
                preview.style.display = 'block';
            }
            
            // 读取选中的文件（转换为DataURL格式）
            reader.readAsDataURL(fileInput.files[0]);
        } else {
            // 如果没有文件，隐藏预览
            preview.style.display = 'none';
            preview.src = '';
        }
    }
</script>
    <br>
    <label>个人简介:</label><input type="text" style="width: 500px; height: 120px; font-size: 16px;">
    <br>
 
    <button type="submit">提交</button>
    <button type="reset">重置</button>
</body>
</html>
